<template>
  <div>
    <div ref="dashBoard" style="width: 200px; height: 200px"></div>
  </div>
</template>

<script lang="ts">
import * as echarts from 'echarts';

export default {
  name: 'DashBoard',
  props: {
    usage: {
      type: Number,
      required: true,
    },
    type: {
      type: String,
      required: true,
    },
  },
  computed: {
    maxNum() {
      let defaultNum = 100;
      if (this.type === 'power') {
        defaultNum = 500;
      }
      return defaultNum;
    },
  },
  watch: {
    usage() {
      this.updateChart();
    },
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.dashBoard);
      this.chart.setOption(this.getChartOption(this.usage));
    },
    updateChart() {
      this.chart.setOption(this.getChartOption(this.usage));
    },
    getChartOption(usage: any) {
      return {
        series: [
          {
            type: 'gauge',
            startAngle: 210,
            endAngle: -30,
            min: 0,
            max: this.maxNum,
            splitNumber: 10,
            axisLine: {
              lineStyle: {
                width: 4,
                color: [
                  [0.3, '#67e0e3'],
                  [0.7, '#37a2da'],
                  [1, '#fd666d'],
                ],
              },
            },
            pointer: {
              itemStyle: {
                color: 'auto',
              },
            },
            axisTick: {
              distance: -12,
              length: 6,
              lineStyle: {
                color: 'auto',
                width: 2,
              },
            },
            splitLine: {
              distance: -18,
              length: 8,
              lineStyle: {
                color: 'auto',
                width: 2,
              },
            },
            axisLabel: {
              color: 'auto',
              distance: 20,
              fontSize: 10,
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}%',
              color: 'auto',
              fontSize: 20,
            },
            data: [
              {
                value: usage,
              },
            ],
          },
        ],
      };
    },
  },
};
</script>
